"use client"

import { useState } from 'react'
import {clsx} from 'clsx'
import {motion} from "framer-motion"

/**
 * 开关动画
 * @returns {JSX.Element}
 * @constructor
 */
export default function Switch(){

  const [isOpen, setIsOpen] = useState(false)
  return(
    <div className={"h-screen w-full bg-gradient-to-tr from-pink-700 to-purple-500 flex justify-center items-center"}>
      <div className={clsx("w-[160px] h-[100px] bg-white/40 rounded-[50px] p-2.5 flex items-center cursor-pointer",isOpen && 'justify-end')} onClick={()=>setIsOpen(!isOpen)}>
        <motion.div className={"size-20 bg-white rounded-full"}
                    layout
                    transition={{
                      type:'spring',
                      stiffness:300,
                      damping:20
        }}>

        </motion.div>
      </div>
    </div>
  )
}
